@charset "UTF-8";
html{
  height: 100%;
}
body{
  height: 100%;
}
body>div{
  height: 100%;
}
body>div>div{
  height: 100%;
}
*{
  padding: 0px;
  margin: 0px;
}
.br{
  border: 1px solid grey;
}
.myloginwrap{
  display: flex;
  flex-direction:column;
  transition: width 2s;

  .top{
    height: 153px;
    width: 100%;
    background:-webkit-linear-gradient(top,#fd4948 40%,#ff7251);

    .top_back{
      width: 20px;
      height: 20px;
      margin-top: 15px;
      margin-left: 15px;
      color: #f1f1f1;
      font-size: 25px;
    }
  }
  .body{
    width: 100%;
    height: 77%;
    display: flex;
    justify-content: center;
  }
  .body_c{
      height: 90%;
      width: 70%;
    position: relative;
  }
  .body_c_login{
    width: 183px;
    height: 30px;
    padding-top:35px;
    margin: 0 auto;


  }
  .body_c_login_txt{
    height: 22px;
    width: 180px;
    display: flex;
    justify-content: space-between;
    position: relative;
    text-align: center;
    font-family:”Microsoft YaHei”;

    .bot_line{
      position: absolute;
      width: 30px;
      height: 3px;
      background: #f2493d;
      left:22%;
      transform: translateX(-50%);
      bottom:-10px

    }

  }

  .body_c_login_txt_nopwd{
    color: #f2493d;
    font-size: 15px;
  }
  .body_c_login_txt_pwd{
    color: #b0b0b0;
    font-size: 15px;
  }
  .body_c_inputbox{
    width:256px;
    height: 150px;
    margin: 0 auto;
    display: flex;
    flex-direction:column;
    font-family:”Microsoft YaHei”;

  }
  .body_c_inputbox_nopwd{
    width: 100%;
    height: 100%;
  }
  .body_c_inputbox_nopwd_tel{
    width: 100%;
    height: 40px;
    padding-top: 35px;
    border-bottom: 1px solid #b0b0b0;
    position: relative;

    span{
      position: absolute;
      top: 72%;
      transform: translateY(-50%);
      left: 5px;
      font-size: 20px;
      color: #b0b0b0;
    }
    input{
      outline: none;
      border:none;
      position: absolute;
      left: 30px;
      height: 35px;
      width: 196px;
      overflow: hidden;
    }
    i{
      position: absolute;
      right: 7px;
      font-size: 20px;
      color: #b0b0b0;
      top: 72%;
      transform: translateY(-50%);
    }

  }
  .body_c_inputbox_nopwd_code{
    width: 100%;
    height: 42px;
    padding-top: 35px;
    border-bottom: 1px solid #b0b0b0;
    position: relative;

    span{
      position: absolute;
      top: 72%;
      transform: translateY(-50%);
      left: 5px;
      font-size: 20px;
      color: #b0b0b0;
    }
    input{
      outline: none;
      border:none;
      position: absolute;
      left: 30px;
      height: 40px;
      width: 142px;
      overflow: hidden;
    }
    div{
      width: 72px;
      height: 32px;
      position: absolute;
      right: 0;

      font-size: 12px;
      line-height: 35px;
      text-align: center;
      color: #f4f4f4;
      top: 72%;
      transform: translateY(-50%);
      border-radius: 40px;
      background:-webkit-linear-gradient(top,#fd4948 40%,#ff7251);
    }

  }
  .forgetpwd{
    color: #b0b0b0;
    text-align: right;
    margin-top: 11px;
    font-size: 12px;
    display: none;
  }
  .loginbot{
    height: 45px;
    width: 276px;
    bottom: 158px;
    position: absolute;
    left: -7px;
    border-radius: 50px;
    text-align: center;
    line-height: 45px;
    font-size: 15px;
    color: #f4f4f4;
    background-color: #b0b0b0;
    font-family:”Microsoft YaHei”;

  }
  .third{
    height: 13px;
    width: 274px;
    position: absolute;
    left: -7px;
    margin-left: -1px;
    bottom: 105px;

  }
  .third_line{
    width: 80px;
    height: 1px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #b0b0b0;

  }
  .third_txt{
    color: #b0b0b0;
    text-align: center;
    font-size: 12px;
    position: absolute;
    top: -12%;
    left: 50%;
    transform: translateX(-50%);

  }
  .third_icon{
    height: 50px;
    width: 50px;
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50px;
    color: #ff3f3f;
    font-size: 30px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #b0b0b0;
  }
  .agreement{
    width: 100%;
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    text-align: center;
    color: #b0b0b0;
  }
  .agreement_user{
    text-align: center;
    color: #9ea3b4;
  }

  .body_c_inputbox_pwd{
    width: 100%;
    height: 100%;
    .body_c_inputbox_pwd_tel{
      width: 100%;
      height: 40px;
      padding-top: 35px;
      border-bottom: 1px solid #b0b0b0;
      position: relative;

      span{
        position: absolute;
        top: 72%;
        transform: translateY(-50%);
        left: 5px;
        font-size: 20px;
        color: #b0b0b0;
      }
      input{
        outline: none;
        border:none;
        position: absolute;
        left: 30px;
        height: 35px;
        width: 196px;
        overflow: hidden;
      }
      i{
        position: absolute;
        right: 7px;
        font-size: 20px;
        color: #b0b0b0;
        top: 72%;
        transform: translateY(-50%);
      }

    }

    .body_c_inputbox_pwd_code{
      width: 100%;
      height: 40px;
      padding-top: 35px;
      border-bottom: 1px solid #b0b0b0;
      position: relative;

      span{
        position: absolute;
        top: 67%;
        transform: translateY(-50%);
        left: 5px;
        font-size: 20px;
        color: #b0b0b0;
      }
      input{
        outline: none;
        border:none;
        position: absolute;
        left: 30px;
        height: 37px;
        width: 196px;
        overflow: hidden;
      }
      i{
        position: absolute;
        right: 7px;
        font-size: 20px;
        color: #b0b0b0;
        top: 72%;
        transform: translateY(-50%);
      }

    }
  }


}